console.log('home component')
import './home.less'
import API from '@/api/api'
import PublicHeader from '../../components/header/header.jsx'
import React,{Component} from 'react'
import {connect} from 'react-redux'
import {saveFormData,saveImg,clearData} from '@/store/home/action'
import {Link} from 'react-router-dom'
import mixin, {padStr} from '@/utils/mixin'
import PropTypes from 'prop-types'
import envconfig from '@/envconfig/envconfig'
import TouchableOpacity from '@/components/TouchableOpacity/TouchableOpacity.jsx'
import PublicAlert from '@/components/alert/alert.jsx'
import {clearSelected} from '@/store/production/action'
import {is,fromJS} from 'immutable'
//@mixin({padstr})
class Home extends Component{
     static propTypes = {
         formData:PropTypes.object.isRequired,
         saveFormData:PropTypes.func.isRequired,
         saveImg:PropTypes.func.isRequired,
         clearData:PropTypes.func.isRequired,
         clearSelected:PropTypes.func.isRequired
     }
    constructor(props){
        super(props)
        console.log(props)
        //console.log(this.state)
        this.initData(props)
        this._this = this;
        this.state = {
            alertStatus:false, //弹框状态
            alertTip:''// 弹框提示文字
        }
    }
    

    // 已选择的商品数据
    // @type {Array} 
    selectedProList = []
    handleInput = (type,event) =>{
        let value = event.target.value;
        switch(type){
            case 'orderSum':
            value = value.replace(/\D/g,'');
            break;
            case 'name':
            break;
            case 'phoneNo':
            value = padStr(value.replace(/\D/g,''),[3,7],'',event.target)
            break;
            default:;
        }
        this.props.saveFormData(value,type);
    }
    uploadImg =  async (event) =>{
        try{
            let formdata = new FormData();
            formdata.append('file',event.target.files[0]);
            let result = await API.uploadImg({data:formdata});
            this.props.saveImg(envconfig.imgUrl + result.image_path);
            console.log(result);
        }catch(err){
            console.error(err)
        }
    }
    initData = props =>{
        this.selectedProList = [];
        props.proData.dataList.forEach(item =>{
            if(item.selectStatus && item.selectNum){
                this.selectedProList.push(item);
            }
        })
        console.log(this.props.formData)
    }

    //周期内通过数据驱动渲染,这个方法是过时了的,不推荐
    componentWillReceiveProps(nextProps){
        if(!is(fromJS(this.props.proData),fromJS(nextProps.proData)) ){
           this.initData(nextProps) 
        }
    }
    
    // 使用箭头函数，防止this指向改变，因为本函数会当回调函数传递子组件
    submitForm = () =>{
        const {orderSum,name,phoneNo} = this.props.formData;
        console.log('submit form')
        let alertTip = '';
        if(!orderSum.toString().length){
            alertTip = '请填写金额'
        }else if(!name.toString().length){
            alertTip = '请填写姓名'
        }else if(!phoneNo.toString().length){
            alertTip = '请填写正确的手机号'
        }else{
            alertTip = '添加数据成功'
            this.props.clearSelected();
            this.props.clearData();
            //this.props.saveFormData('list','good')
            //console.log(this.props.formData)
        }
        this.setState({
            alertStatus:true,
            alertTip
        })
        
    }
    closeAlert = () =>{
        this.setState({
            alertStatus:false,
            alertTip:''
        })
    }
    render(){
        //console.log(this)
        return(
           <main className="home-container">
                <PublicHeader title='首页' record>
                    <span>this is a child test</span>
                </PublicHeader>
                <p className="common-title">请录入您的信息</p>
                <form action="#" className="home-form">
                    <div className="home-form-tiem">
                        <span>销售金额：</span>
                        <input type="text" placeholder="请输入订单金额" value={this.props.formData.orderSum} onChange={this.handleInput.bind(this,'orderSum')}/>
                    </div>
                    <div className="home-form-tiem">
                        <span>客户姓名：</span>
                        <input type="text" placeholder="请输入客户姓名" value={this.props.formData.name} onChange={this.handleInput.bind(this,'name')}/>
                    </div>
                    <div className="home-form-tiem">
                        <span>客户电话：</span>
                        <input type="text" maxLength="13" placeholder="请输入客户电话" value={this.props.formData.phoneNo} onChange={this.handleInput.bind(this,'phoneNo')}/>
                    </div>
                </form>
                <div>
                    <p className="common-title">请选择销售的产品</p>
                    <Link to="/production" className="common-select-btn">
                        {
                            this.selectedProList.length ?
                            <ul className="selected-pro-list">
                                {
                                    this.selectedProList.map( (item,index) =>{
                                        return <li key={index} className ="selected-pro-item ellipsis">{item.product_name}x{item.selectNum}</li>
                                    })
                                }
                            </ul>
                            :'选择商品'
                        }
                    </Link>
                </div>
                <div className="upload-img-con">
                    <p className='common-title'>请上传发票凭证</p>
                    <div className="file-lable">
                        <span className="common-select-btn">上传图片</span>
                        <input type="file" onChange={this.uploadImg}/>
                    </div>
                    <img src={this.props.formData.imgpath} className="select-img" alt=""/>
                </div>
                <TouchableOpacity className="submit-btn" text="提交" clickCallBack={this.submitForm}></TouchableOpacity>
                <PublicAlert closeAlert={this.closeAlert} alertTip={this.state.alertTip || '提示信息'}  alertStatus={this.state.alertStatus}></PublicAlert>
           </main>
        )
    }
}

export default connect(state =>(
    {
        formData:state.formData,
        proData:state.proData,
    }
),{
    saveFormData,
    saveImg,
    clearData,
    clearSelected
})(Home)
//export default Home;



